<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        /*
        1、
        v-focus - 自动聚焦，当一个输入框被插入到DOM时自动获得焦点
            Vue.directive('focus', {
                inserted: function (el) {
                    el.focus();
                }
            });

        使用    <input v-focus />

        2、v-click-outside - 点击外部关闭，常用于实现点击组件外部区域来关闭弹出层（如菜单、模态框等）

            Vue.directive('click-outside', {
                bind(el, binding, vnode) {
                    el.clickOutsideEvent = function(event) {
                    if (!(el == event.target || el.contains(event.target))) {
                        vnode.context[binding.expression](event);
                    }
                    };
                    document.body.addEventListener('click', el.clickOutsideEvent);
                },
                unbind(el) {
                    document.body.removeEventListener('click', el.clickOutsideEvent);
                }
            });

        使用 <div v-click-outside="closeDropdown">...</div>
        */ 
    </script>
</body>
</html>